import { Popover, Tag } from 'antd'

interface Props {
  data: string[]
  limit?: number
}

export default ({ data: tags = [], limit = 5 }: Props) => (
  <span>
    {tags.length <= limit
      ? renderTags(tags)
      : renderTags(tags.slice(0, limit)).concat(renderMore(tags.slice(limit)))}
  </span>
)

const renderTags = (ts: Props['data']) => ts.map(t => <Tag key={t}>{t}</Tag>)

const renderMore = (ts: Props['data']) => (
  <Popover key="..." trigger="hover" content={renderTags(ts)}>
    ...
  </Popover>
)
